<template>
  <div class="marginT20 loan-products">
    <h1 class="module-title" style="margin-bottom:20px;">贷款产品</h1>
    <p class="more">
      <router-link tag="a" to="/financingProducts">查看更多</router-link>
    </p>
    <Row class="loan-produxts-list">
      <div
        class="cartItem"
        v-for="(item,index) in productList"
        :key="index"
        :data-productId="item.productId"
        @click="goDetailPage(item)"
      >
        <img :src="item.imgUrl" style="width:100%" height="130px" />
        <h3 class="marginT10">{{item.productName}}</h3>
        <p class="marginT10" style="margin-top:6px;">
          <span style="color:#171717">合作机构</span>
          <span style="color:#666666">{{item.shortName}}</span>
        </p>
        <p class="marginT10" style="margin-top:6px;">
          <span style="color:#171717">贷款金额</span>
          <span style="color:#666666">{{item.loanAmount}}万</span>
        </p>
        <p class="marginT10" style="margin-top:6px;">
          <span style="color:#171717">贷款利率</span>
          <span style="color:#666666">{{item.loanRateDown}}%-{{item.loanRateUp}}%</span>
        </p>
        <p class="marginT10" style="margin-top:6px;">
          <span style="color:#171717">贷款期限</span>
          <span style="color:#666666">{{item.loanPeriodDown}}月</span>
        </p>
      </div>
    </Row>
  </div>
</template>
<script>
export default {
  name: "loanProducts",
  props: ["productList"],
  data() {
    return {};
  },
  mounted() {},
  methods:{
    goDetailPage(data){
      this.$router.push({
          path:'/financingProductsDetails',
          query:{
              productId:data.productId
          }
      })
    }
  }
};
</script>
<style scoped>
.loan-products {
  width: 1240px;
  margin: 0 auto;
}
.loan-products,
.login-card h3 {
  text-align: center;
}
.more {
  line-height: 20px;
  text-align: right;
}
.more a {
  display: inline-block;
  margin-right: 22px;
  color: rgba(0, 165, 115, 1);
  line-height: 20px;
  border-bottom: 1px solid rgba(0, 165, 115, 1);
}
.ivu-form-item {
  margin-bottom: 15px;
}
.loan-produxts-list {
  width: 100%;
  margin-top: 20px;
}
.cartItem {
  display: inline-block;
  width: 18%;
  border: 1px solid #ccc;
  box-shadow: 5px 5px 5px #ccc;
  padding-bottom: 30px;
  border-radius: 5px;
  background: #fff;
}
.cartItem h3 {
  color: #333333;
  margin-top: 10px;
  margin-bottom: 15px;
}
.cartItem span {
  display: inline-block;
  width: 70px;
  text-align: left;
}
.cartItem:not(:first-child) {
  margin-left: 20px;
}
</style>